<template>
    <div class="box">
        <!-- 主评论 -->
        <div class="main-comment">
            <div>
                <div v-if="props.comment.avatar.length > 8">
                    <img :src="props.comment.avatar" alt="头像" class="start-icon">
                </div>
                <div v-else>
                    <img src="../assets/icons/favsion.png" alt="头像" class="start-icon">
                </div>

                <span>{{ props.comment.nickname }}</span>
            </div>
            <div class="comment">

                {{ props.comment.content }}
            </div>

            <div class="time-box">
                <div>
                    <img src="../assets/icons/times.svg" alt="times">
                    <span>
                        {{ props.comment.create_time }}
                    </span>
                </div>
                <div @click="showCommentInput = !showCommentInput">
                    <img src="../assets/icons/info.svg" alt="info">
                    <span>
                        回复
                    </span>
                </div>
            </div>
  <!-- 底部发言框 -->
  <div class="input-box" v-show="showCommentInput">
    <div class="input-group input-group-sm mb-3">
        <input type="text" class="form-control"
        v-model="commentStore.pullComment.content"
        :placeholder="'@'+props.comment.nickname+'<---至少5个字'" aria-label="comment" aria-describedby="button-addon2">
        <button class="btn btn-primary"  @click="pullComment()"  type="button" id="button-addon2">回复:  {{props.comment.nickname}}</button>
      </div>
      

   
</div>
        </div>

        <!-- 从评论 -->
        <div v-for="comment in follow_comments" :key="comment.comment_id" style="display: flex;
        flex-direction: row;
        justify-content: flex-end;">
            <div class="follow-comment">
                <div>
                    <div v-if="comment.avatar.length > 8">
                        <img :src="comment.avatar" alt="头像">
                    </div>
                    <div v-else>
                        <img src="../assets/icons/favsion.png" alt="头像">
                    </div>
                    <span>{{ comment.nickname }}</span>
                </div>
                <div class="comment">
                    {{ comment.content }}
                </div>

                <div class="time-box">
             
                    <div>
                        <img src="../assets/icons/times.svg" alt="times">
                        <span>
                            {{ comment.create_time }}
                        </span>
                    </div>
                    
                </div>
               
            </div>

        </div>


    </div>
</template>
<script setup lang="ts">
import { ref, defineProps, onMounted,watch } from "vue"
import { CommentsStore } from '../store/commentStore/index'
import {ArticleStore} from '../store/articelStore/index'
import {AuthStore} from '../store/authStore/index'
import toast from "./Toast"
const props = defineProps(["comment"])
const commentStore = CommentsStore()
const showCommentInput = ref(false)
const articleStore = ArticleStore()
const follow_comments:any  = ref()
const authStore = AuthStore()
function pullComment(){
    if( !authStore.loginStatus ){
        toast.showToast({msg:"登陆可评论",type:"warning"})
        return
    }
    if(   commentStore.pullComment.content.length<5  ){
        toast.showToast({msg:"都说了最少5个字",type:"warning"})
        return
    }
    commentStore.pullComment.article_id = articleStore.article_now.article_id
    commentStore.pullComment.comment_id = props.comment.comment_id
    commentStore.pullComment.isMain = "0"
    commentStore.pullCommentData()
    commentStore.pullComment={
            article_id: "",
            comment_id: "",
            content: "",
            isMain: "1"
    }
    commentStore.getCommentListData(articleStore.article_now.article_id)
}

watch(props.comment.follow_comments,()=>{
    follow_comments.value = props.comment.follow_comments
})

onMounted(() => {
    try {
        if (props.comment != null) {
            follow_comments.value = props.comment.follow_comments;
        }
    } catch (error) {
        console.log("评论获取错误")
    }

})

</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    height: auto;
    background: $passlink-font-color-black;
  
    align-items: left;
    padding:5px;
    color: $passlink-font-color-white;

    span {
        font-weight: bold;
        font-size: $passlink-font-size16;
    }

    img {
        width: 45px;
        height: 45px;
        border-radius: 5px;
        transition: all .5s;
    }

    .comment {
        width: 100%;
        word-wrap: normal;
        font-weight: lighter;
        font-size: $passlink-font-size14;
    }

    .time-box {
    
        display: flex;
        justify-content: space-around;

        img {

            width: 16px;
            height: 16px;
        }

        span {
            font-weight: lighter;
            font-size: $passlink-font-size14;

        }
    }

    .main-comment{
        margin-top: 5px;
        width: 100%;
        height: auto;
        border-bottom: 2px solid $passlink-font-color-white;
   
          
          .start-icon:hover {
            padding: 2px;
            box-shadow: 0 0 15px $passlink-font-color-white;
          }
          
          .start-icon:hover::before {
            transition: all .5s;
          }
          
    }
    .follow-comment {
        
        margin-top: 5px;
        width: 80%;
        height: auto;
        margin-left: 100px;
        border-bottom: 1px solid $passlink-font-color-white;
    }

}
</style>
